<template>
  <div class="js-area-cascader">
    <el-cascader
      ref="jsCascaderRef"
      v-model="selectedArea"
      :options="areaOptions"
      :props="cascaderProps"
      placeholder="选择江苏省-市-区-镇"
      clearable
      size="medium"
      @change="handleAreaChange"
      style="width: 100%"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  name: "JiangsuAreaCascader",
  props: {
    // 外部传入默认选中值（格式：[省ID, 市ID, 区ID, 镇ID]）
    defaultSelected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 选中的四级ID数组
      selectedArea: [],
      // 顶层数据（仅江苏省）
      areaOptions: [],
      // 四级级联配置（关键：设置lazy为true，children字段映射）
      cascaderProps: {
        lazy: true,
        lazyLoad: this.loadChildData, // 懒加载子级方法
        checkStrictly: true, // 允许选择任意层级
        label: "nodeText", // 显示文本字段
        value: "nodeId", // 实际值字段
        children: "children", // 子级数据字段
        loadingIcon: "el-icon-loading" // 加载中图标
      }
    };
  },
  watch: {
    // 同步外部默认值到组件内部
    defaultSelected: {
      immediate: true,
      handler(newVal) {
        this.selectedArea = [...newVal];
      }
    },
    // 清空选择时重置组件展开状态
    selectedArea(newVal) {
      if (newVal.length === 0 && this.$refs.jsCascaderRef) {
        this.$refs.jsCascaderRef.clearCheckedNodes();
      }
    }
  },
  mounted() {
    // 初始化加载顶层（江苏省）数据
    this.initProvinceData();
  },
  methods: {
    /**
     * 初始化顶层数据：仅加载江苏省
     */
    initProvinceData() {
      // 模拟接口请求延迟（实际项目替换为axios请求）
      setTimeout(() => {
        this.areaOptions = [
          {
            nodeId: "320000", // 江苏省行政编码
            nodeText: "江苏省",
            hasChildren: true // 有下级（市）
          }
        ];
         // 触发组件重新渲染（关键修复）
        this.$forceUpdate();
      }, 500);
    },

    /**
     * 懒加载子级数据（核心方法）
     * @param {Object} node - 当前点击的节点（含value/nodeId、level层级等信息）
     * @param {Function} resolve - 数据加载完成的回调（必须调用）
     */
    loadChildData(node, resolve) {
        console.log("@@@@@@@",node, resolve)
      // 开启加载中状态（Element UI自带样式）
      node.loading = true;

      // 模拟接口延迟（实际项目替换为后端请求，参数为node.nodeId）
      setTimeout(() => {
        let childData = [];
        // 根据当前节点的nodeId（父级ID）匹配子级数据
        switch (node.value) {
          // —— 第一级：江苏省 → 加载13个地级市 ——
          case "320000":
            childData = [
              { nodeId: "320100", nodeText: "南京市", hasChildren: true },
              { nodeId: "320200", nodeText: "无锡市", hasChildren: true },
              { nodeId: "320300", nodeText: "徐州市", hasChildren: true },
              { nodeId: "320400", nodeText: "常州市", hasChildren: true },
              { nodeId: "320500", nodeText: "苏州市", hasChildren: true },
              { nodeId: "320600", nodeText: "南通市", hasChildren: true },
              { nodeId: "320700", nodeText: "连云港市", hasChildren: true },
              { nodeId: "320800", nodeText: "淮安市", hasChildren: true },
              { nodeId: "320900", nodeText: "盐城市", hasChildren: true },
              { nodeId: "321000", nodeText: "扬州市", hasChildren: true },
              { nodeId: "321100", nodeText: "镇江市", hasChildren: true },
              { nodeId: "321200", nodeText: "泰州市", hasChildren: true },
              { nodeId: "321300", nodeText: "宿迁市", hasChildren: true }
            ];
            break;

          // —— 第二级：南京市 → 加载11个市辖区 ——
          case "320100":
            childData = [
              { nodeId: "320102", nodeText: "玄武区", hasChildren: true },
              { nodeId: "320104", nodeText: "秦淮区", hasChildren: true },
              { nodeId: "320105", nodeText: "建邺区", hasChildren: true },
              { nodeId: "320106", nodeText: "鼓楼区", hasChildren: true },
              { nodeId: "320111", nodeText: "浦口区", hasChildren: true },
              { nodeId: "320113", nodeText: "栖霞区", hasChildren: true },
              { nodeId: "320114", nodeText: "雨花台区", hasChildren: true },
              { nodeId: "320115", nodeText: "江宁区", hasChildren: true },
              { nodeId: "320116", nodeText: "六合区", hasChildren: true },
              { nodeId: "320117", nodeText: "溧水区", hasChildren: true },
              { nodeId: "320118", nodeText: "高淳区", hasChildren: true }
            ];
            break;

          // —— 第三级：南京市玄武区 → 加载下辖街道（镇）——
          case "320102":
            childData = [
              { nodeId: "320102001", nodeText: "梅园新村街道", hasChildren: false },
              { nodeId: "320102002", nodeText: "新街口街道", hasChildren: false },
              { nodeId: "320102003", nodeText: "玄武门街道", hasChildren: false },
              { nodeId: "320102004", nodeText: "后宰门街道", hasChildren: false },
              { nodeId: "320102005", nodeText: "锁金村街道", hasChildren: false },
              { nodeId: "320102006", nodeText: "红山街道", hasChildren: false },
              { nodeId: "320102007", nodeText: "孝陵卫街道", hasChildren: false },
              { nodeId: "320102008", nodeText: "玄武湖街道", hasChildren: false },
              { nodeId: "320102009", nodeText: "徐庄街道", hasChildren: false }
            ];
            break;

          // —— 第二级：苏州市 → 加载10个区县 ——
          case "320500":
            childData = [
              { nodeId: "320505", nodeText: "虎丘区", hasChildren: true },
              { nodeId: "320506", nodeText: "吴中区", hasChildren: true },
              { nodeId: "320507", nodeText: "相城区", hasChildren: true },
              { nodeId: "320508", nodeText: "姑苏区", hasChildren: true },
              { nodeId: "320509", nodeText: "吴江区", hasChildren: true },
              { nodeId: "320581", nodeText: "常熟市", hasChildren: true },
              { nodeId: "320582", nodeText: "张家港市", hasChildren: true },
              { nodeId: "320583", nodeText: "昆山市", hasChildren: true },
              { nodeId: "320585", nodeText: "太仓市", hasChildren: true },
              { nodeId: "320586", nodeText: "如皋市", hasChildren: true }
            ];
            break;

          // —— 第三级：苏州市昆山市 → 加载下辖镇 ——
          case "320583":
            childData = [
              { nodeId: "320583100", nodeText: "玉山镇", hasChildren: false },
              { nodeId: "320583101", nodeText: "巴城镇", hasChildren: false },
              { nodeId: "320583102", nodeText: "周市镇", hasChildren: false },
              { nodeId: "320583103", nodeText: "陆家镇", hasChildren: false },
              { nodeId: "320583104", nodeText: "花桥镇", hasChildren: false },
              { nodeId: "320583105", nodeText: "淀山湖镇", hasChildren: false },
              { nodeId: "320583106", nodeText: "张浦镇", hasChildren: false },
              { nodeId: "320583107", nodeText: "周庄镇", hasChildren: false },
              { nodeId: "320583108", nodeText: "锦溪镇", hasChildren: false },
              { nodeId: "320583109", nodeText: "千灯镇", hasChildren: false },
              { nodeId: "320583110", nodeText: "陆家镇", hasChildren: false }
            ];
            break;

          // —— 其他城市/区县可按需补充（示例：无锡市梁溪区）——
          case "320200": // 无锡市
            childData = [
              { nodeId: "320202", nodeText: "梁溪区", hasChildren: true },
              { nodeId: "320205", nodeText: "锡山区", hasChildren: true },
              { nodeId: "320206", nodeText: "惠山区", hasChildren: true }
            ];
            break;
          case "320202": // 无锡市梁溪区
            childData = [
              { nodeId: "320202001", nodeText: "崇安寺街道", hasChildren: false },
              { nodeId: "320202002", nodeText: "通江街道", hasChildren: false },
              { nodeId: "320202003", nodeText: "广瑞路街道", hasChildren: false }
            ];
            break;
        }

        // 关键：调用resolve将子级数据传给组件渲染
        resolve(childData);
        // 关闭加载中状态
        node.loading = false;
      }, 600);
    },

    /**
     * 选择变化回调（可向外传递选中数据）
     * @param {Array} val - 选中的四级ID数组
     */
    handleAreaChange(val) {
      // 向外传递选中的ID数组（如：["320000", "320100", "320102", "320102001"]）
      this.$emit("areaChange", val);
      // 若需要传递“文本+ID”对象，可在此处处理（需遍历节点获取文本）
    }
  }
};
</script>

<style scoped>
/* 可选：自定义组件样式 */
.js-area-cascader {
  max-width: 500px;
}
</style>